import React, { useEffect, useState, useRef } from 'react';
import { View, Text, ActivityIndicator, SafeAreaView, ScrollView, TouchableOpacity, TextInput, Animated, StyleSheet, Image, Alert } from 'react-native';
import { Dimensions, Modal as RNModal } from 'react-native';
import Header from '../../../../components/Header';
import { getDeviceRepairDetailApi } from './api';
import { diagnosisRepairApi } from './api';
import { beginRepairApi } from './api';
import { searchSupplierApi } from './api';
import { searchProductApi } from './api';
import { Toast } from '@ant-design/react-native';
import { DatePicker } from '@ant-design/react-native';
import { Modal } from '@ant-design/react-native';
import { request } from '../../../../services/request';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import { endRepairApi } from './api';
import jiahaoIcon from '../../../../assets/jiahao.png';

interface DeviceRepairDetailProps {
    id: string;
    onBackPress?: () => void;
    onNavigateToLogin?: () => void;
}

interface CollapsibleSectionProps {
    title: string;
    isExpanded: boolean;
    onToggle: () => void;
    children: React.ReactNode;
    iconSource: any;
}

const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({ title, isExpanded, onToggle, children, iconSource }) => {
    const animatedHeight = useRef(new Animated.Value(0)).current;
    const animatedOpacity = useRef(new Animated.Value(0)).current;
    const arrowRotation = useRef(new Animated.Value(0)).current;

    useEffect(() => {
        if (isExpanded) {
            // 展开动画
            Animated.parallel([
                Animated.timing(animatedHeight, {
                    toValue: 1,
                    duration: 500,
                    useNativeDriver: false,
                }),
                Animated.timing(animatedOpacity, {
                    toValue: 1,
                    duration: 500,
                    useNativeDriver: false,
                }),
                Animated.timing(arrowRotation, {
                    toValue: 1,
                    duration: 500,
                    useNativeDriver: true,
                }),
            ]).start();
        } else {
            // 收起动画
            Animated.parallel([
                Animated.timing(animatedHeight, {
                    toValue: 0,
                    duration: 500,
                    useNativeDriver: false,
                }),
                Animated.timing(animatedOpacity, {
                    toValue: 0,
                    duration: 500,
                    useNativeDriver: false,
                }),
                Animated.timing(arrowRotation, {
                    toValue: 0,
                    duration: 500,
                    useNativeDriver: true,
                }),
            ]).start();
        }
    }, [isExpanded]);

    return (
        <View style={styles.section}>
            <TouchableOpacity style={styles.sectionHeader} onPress={onToggle}>
                <View style={styles.headerLeft}>
                    <Text style={styles.sectionTitle}>{title}</Text>
                    <Text style={styles.asterisk}>*</Text>
                </View>
                <Animated.Image
                    source={require('../../../../assets/xiala.png')}
                    style={[
                        styles.arrowImage,
                        {
                            transform: [{
                                rotate: arrowRotation.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: ['0deg', '180deg']
                                })
                            }]
                        }
                    ]}
                />
            </TouchableOpacity>
            <Animated.View
                style={[
                    styles.sectionContent,
                    {
                        maxHeight: animatedHeight.interpolate({
                            inputRange: [0, 1],
                            outputRange: [0, 800],
                        }),
                        opacity: animatedOpacity,
                        margin: 0,
                        paddingTop: 0,
                        paddingBottom: 0,
                    }
                ]}
            >
                {children}
            </Animated.View>
        </View>
    );
};

const DeviceRepairDetail: React.FC<DeviceRepairDetailProps> = (props) => {
    const id = props.id || (global as any).deviceRepairDetailId;
    const { onBackPress, onNavigateToLogin } = props;
    const [loading, setLoading] = useState(true);
    const [detail, setDetail] = useState<any>(null);
    const [expandedSections, setExpandedSections] = useState({
        report: true,
        diagnosis: false,
        startRepair: false,
        completeRepair: false,
        evaluation: false
    });

    // 1. 步骤定义和状态映射
    const REPAIR_STEPS = [
        { id: 1, title: '故障报修' },
        { id: 2, title: '故障诊断' },
        { id: 3, title: '开始维修' },
        { id: 4, title: '完成维修' },
        { id: 5, title: '维修评价' },
    ];
    const STATE_TO_STEP: Record<number, number> = {
        1: 2, // 1=待诊断 → step2: 故障诊断
        2: 3, // 2=已诊断 → step3: 开始维修
        3: 4, // 3=维修中 → step4: 完成维修
        4: 5, // 4=待评价 → step5: 维修评价
        5: 5, // 5=已评价 → step5: 维修评价
    };
    const getCurrentStep = (state: number) => STATE_TO_STEP[state] || 1;

    // 1. useState定义在组件最顶层
    const [step, setStep] = useState<number>(1);
    // 2. 页面初始化时根据state自动跳到当前步骤
    useEffect(() => {
        if (detail?.state) setStep(getCurrentStep(Number(detail.state)));
    }, [detail]);
    // 3. renderProgressBar支持点击切换
    const renderProgressBar = () => {
        const currentStep = getCurrentStep(detail.state); // 只用业务状态
        return (
            <View style={styles.progressContainer}>
                <View style={styles.progressBar}>
                    {REPAIR_STEPS.map((s, idx) => (
                        <React.Fragment key={s.id}>
                            <TouchableOpacity 
                                style={[
                                    styles.stepCard,
                                    currentStep === s.id && styles.stepCurrent,
                                    currentStep > s.id && styles.stepCompleted,
                                    currentStep < s.id && styles.stepPending
                                ]} 
                                activeOpacity={0.8} 
                                onPress={() => setStep(Number(s.id))}
                            >
                                <View style={styles.stepCardContent}>
                                    <View style={[
                                        styles.stepIcon,
                                        currentStep === s.id && styles.stepIconCurrent,
                                        currentStep > s.id && styles.stepIconCompleted,
                                        currentStep < s.id && styles.stepIconPending
                                    ]}>
                                        <Text style={styles.stepIconText}>{s.id}</Text>
                                </View>
                                    <Text style={[
                                        styles.stepTitle,
                                        currentStep === s.id && styles.stepTitleCurrent,
                                        currentStep > s.id && styles.stepTitleCompleted
                                    ]}>
                                        {s.title}
                                    </Text>
                                </View>
                            </TouchableOpacity>
                            {idx < REPAIR_STEPS.length - 1 && (
                                <View style={[
                                    styles.stepConnector,
                                    currentStep > s.id && styles.stepConnectorCompleted
                                ]} />
                            )}
                        </React.Fragment>
                    ))}
                </View>
            </View>
        );
    };

    // 3. 步骤内容渲染（只演示报修步骤，其他步骤可仿照报修详情实现）
    const [errorReason, setErrorReason] = useState('');
    const [errorDiagDesc, setErrorDiagDesc] = useState('');
    const [firstSolution, setFirstSolution] = useState('');
    const [isOutsource, setIsOutsource] = useState(false);
    const [expectEndTime, setExpectEndTime] = useState('');
    const [showSupplierModal, setShowSupplierModal] = useState(false);
    const [supplierKeyword, setSupplierKeyword] = useState('');
    const [supplierList, setSupplierList] = useState<any[]>([]);
    const [supplierLoading, setSupplierLoading] = useState(false);
    const [selectedSupplier, setSelectedSupplier] = useState<any>(null);
    const [finalSolution, setFinalSolution] = useState('');
    const [serviceFee, setServiceFee] = useState('');
    const [outServiceFee, setOutServiceFee] = useState('');
    const [serviceDesc, setServiceDesc] = useState('');
    const [checkerDesc, setCheckerDesc] = useState('');
    const [repairImages, setRepairImages] = useState<string[]>([]);
    // state
    const [checkerResult, setCheckerResult] = useState<number>(0);
    const [errorState, setErrorState] = useState<number>(0);
    const [imageModalVisible, setImageModalVisible] = useState(false);
    const [selectedImage, setSelectedImage] = useState<string>('');

    // 故障诊断步骤相关
    const [selectedProducts, setSelectedProducts] = useState<any[]>([]); // 选中的备品备件
    const [productModalVisible, setProductModalVisible] = useState(false);
    const [productSearch, setProductSearch] = useState('');
    const [productList, setProductList] = useState<any[]>([]);
    const [productLoading, setProductLoading] = useState(false);

    // 查询供应商
    const fetchSupplierList = async (keyword = '') => {
        setSupplierLoading(true);
        let res;
        try {
            res = await searchSupplierApi({ current: 1, size: 20, keyword });
            setSupplierList(res?.data?.records || []);
        } catch (e) {
            setSupplierList([]);
        } finally {
            setSupplierLoading(false);
        }
        return res;
    };

    // 查询备品备件列表
    const fetchProductList = async (keyword = '') => {
        setProductLoading(true);
        try {
            const params = { current: 1, size: 20, keyword };
            console.log('备品备件请求参数:', params);
            const res = await searchProductApi(params);
            console.log('备品备件接口返回:', res);
            setProductList(res?.data?.records || []);
        } catch (e) {
            console.error('备品备件接口异常:', e);
            setProductList([]);
        } finally {
            setProductLoading(false);
        }
    };

    // 选择备品备件
    const handleSelectProduct = (item: any) => {
        const exist = selectedProducts.find((p: any) => p.id === item.id);
        if (!exist) {
            setSelectedProducts([...selectedProducts, { ...item, quantity: 1 }]);
        }
        setProductModalVisible(false);
        setProductSearch('');
    };
    // 数量调整
    const handleProductQuantityChange = (id: string, delta: number) => {
        setSelectedProducts(prev => prev.map(p => p.id === id ? { ...p, quantity: Math.max(1, (p.quantity || 1) + delta) } : p));
    };
    // 删除已选
    const handleRemoveProduct = (id: string) => {
        setSelectedProducts(prev => prev.filter(p => p.id !== id));
    };

    // 在组件内添加格式化函数：
    const formatDateTime = (str: string) => {
        if (!str) return '';
        if (/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/.test(str)) return str;
        if (/\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(str)) return str + ':00';
        return str;
    };

    const handleStepSubmit = async (stepId: number) => {
        if (stepId === 2) {
            // 故障诊断提交
            const id = detail?.id;
            const error_reason = errorReason;
            const error_diag_desc = errorDiagDesc;
            const product_list = selectedProducts.map((item: any) => ({ product_id: item.id, quantity: item.quantity }));
            const submitData = { id, error_reason, error_diag_desc, product_list };
            console.log('诊断提交数据:', submitData);
            try {
                const res = await diagnosisRepairApi(submitData);
                Toast.info(res.msg || '提交成功', 1);
                setStep(step + 1); // 跳到下一个流程
                // 新增：提交后刷新详情，确保state同步
                const detailRes = await getDeviceRepairDetailApi(id);
                setDetail(detailRes?.data || null);
                console.log('诊断提交接口返回:', res);
            } catch (e) {
                Toast.fail('提交失败', 1);
                console.error('诊断提交失败', e);
            }
            return;
        }
        if (stepId === 3) {
            // 开始维修提交
            const id = detail?.id;
            const is_outsource = isOutsource;
            const supplier_id = selectedSupplier?.id || '';
            const first_solution = firstSolution;
            const final_solution = '';
            const expect_end_time = formatDateTime(expectEndTime);
            const submitData = { id, is_outsource, supplier_id, first_solution, final_solution, expect_end_time };
            console.log('开始维修提交数据:', submitData);
            try {
                const res = await beginRepairApi(submitData);
                Toast.info(res.msg || '提交成功', 1);
                setStep(step + 1);
                // 新增：提交后刷新详情，确保state同步
                const detailRes = await getDeviceRepairDetailApi(id);
                setDetail(detailRes?.data || null);
                console.log('开始维修提交接口返回:', res);
            } catch (e) {
                Toast.fail('提交失败', 1);
                console.error('开始维修提交失败', e);
            }
            return;
        }
        if (stepId === 4) {
            // 完成维修提交
            Toast.info('提交成功', 1);
            setStep(step + 1);
            return;
        }
        // 其他步骤逻辑
        console.log('提交步骤', stepId, detail);
    };
    // 4. renderStepContent直接用step变量渲染内容
    useEffect(() => {
        if (detail) {
            setErrorReason(detail.error_reason || '');
            setErrorDiagDesc(detail.error_diag_desc || '');
            setFirstSolution(detail.first_solution || '');
            setIsOutsource(!!detail.is_outsource);
            setExpectEndTime(detail.expect_end_time || '');
            setSelectedSupplier(detail.supplier_id ? { id: detail.supplier_id, supplier_name: detail.supplier_name } : null);
            setFinalSolution(detail.final_solution || '');
            setServiceFee(detail.service_fee ? String(detail.service_fee) : '');
            setOutServiceFee(detail.out_service_fee ? String(detail.out_service_fee) : '');
            setServiceDesc(detail.service_desc || '');
            setCheckerDesc(detail.checker_desc || '');
            setRepairImages(detail.repair_link_list ? detail.repair_link_list.map((img: any) => img.link) : []);
            setCheckerResult(detail.checker_result || 0);
            setErrorState(detail.error_state || 0);
            // 新增：同步 product_list 到 selectedProducts
            setSelectedProducts(
                Array.isArray(detail.product_list)
                    ? detail.product_list.map((item: any) => ({
                        ...item,
                        id: item.product_id || item.id, // 兼容接口返回
                        quantity: item.quantity || 1,
                        product_name: item.product_name || item.name,
                    }))
                    : []
            );
        }
    }, [detail]);
    const renderStepContent = () => {
        const isCurrent = step === getCurrentStep(detail.state);
        switch (step) {
            case 1:
                return (
                    <View style={styles.stepContent}>
                        <View style={styles.stepForm}>
                            <View style={styles.fieldRow}>
                                <Text style={styles.fieldLabel}>设备编号</Text>
                                <Text style={styles.fieldValue}>{detail?.device_num || '未知'}</Text>
                            </View>
                            <View style={styles.fieldRow}>
                                <Text style={styles.fieldLabel}>紧急程度</Text>
                                <Text style={styles.fieldValue}>{detail?.level === 1 ? '十万火急' : detail?.level === 2 ? '紧急' : detail?.level === 3 ? '一般紧急' : detail?.level === 4 ? '不紧急' : '未知'}</Text>
                            </View>
                            <View style={styles.fieldRow}>
                                <Text style={styles.fieldLabel}>故障描述</Text>
                                <Text style={styles.fieldValue}>{detail?.error_desc || '暂无描述'}</Text>
                            </View>
                            <View style={styles.fieldRow}>
                                <Text style={styles.fieldLabel}>报修图片</Text>
                                <TouchableOpacity
                                    style={styles.imageContainer}
                                    onPress={() => {
                                        setSelectedImage(detail?.device_link ? String(detail.device_link) : '');
                                        setImageModalVisible(true);
                                    }}
                                >
                                    <Image
                                        source={detail?.device_link ? { uri: String(detail.device_link) } : require('../../../../assets/zwtp.png')}
                                        style={styles.repairImage}
                                        resizeMode="contain"
                                    />
                                </TouchableOpacity>
                            </View>
                        </View>
                        {isCurrent && (
                            <TouchableOpacity style={styles.submitButton} onPress={() => handleStepSubmit(1)}>
                                <Text style={styles.submitButtonText}>提交</Text>
                            </TouchableOpacity>
                        )}
                    </View>
                );
            case 2:
                return (
                    <View style={styles.stepContent}>
                        <View style={styles.stepForm}>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>故障原因</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        placeholder="请输入故障原因"
                                        placeholderTextColor="#999"
                                        value={errorReason}
                                        onChangeText={setErrorReason}
                                        editable={isCurrent}
                                    />
                                </View>
                            </View>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>故障诊断和描述</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        placeholder="请输入故障诊断和描述"
                                        placeholderTextColor="#999"
                                        value={errorDiagDesc}
                                        onChangeText={setErrorDiagDesc}
                                        editable={isCurrent}
                                    />
                                </View>
                            </View>
                            {/* 备品备件区域 */}
                            <View style={[styles.fieldVerticalRow, { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }]}>
                                <Text style={styles.fieldLabelVertical}>备品备件</Text>
                                <TouchableOpacity onPress={() => { setProductModalVisible(true); fetchProductList(); }}>
                                    <Image source={jiahaoIcon} style={{ width: 24, height: 24 }} />
                                </TouchableOpacity>
                            </View>
                            {/* 已选备品备件列表 */}
                            {selectedProducts.length > 0 && (
                                <View style={{ marginBottom: 10 }}>
                                    {selectedProducts.map(item => (
                                        <View key={item.id} style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 6 }}>
                                            <Text style={{ flex: 1 }}>{item.supplier_name || item.product_name || item.name}</Text>
                                            <TouchableOpacity onPress={() => handleProductQuantityChange(item.id, -1)} style={{ paddingHorizontal: 8 }}><Text style={{ fontSize: 18 }}>-</Text></TouchableOpacity>
                                            <Text style={{ width: 30, textAlign: 'center' }}>{item.quantity}</Text>
                                            <TouchableOpacity onPress={() => handleProductQuantityChange(item.id, 1)} style={{ paddingHorizontal: 8 }}><Text style={{ fontSize: 18 }}>+</Text></TouchableOpacity>
                                            <TouchableOpacity onPress={() => handleRemoveProduct(item.id)} style={{ paddingHorizontal: 8 }}><Text style={{ color: 'red' }}>删除</Text></TouchableOpacity>
                                        </View>
                                    ))}
                                </View>
                            )}
                        </View>
                        {isCurrent && (
                            <TouchableOpacity style={styles.submitButton} onPress={() => handleStepSubmit(2)}>
                                <Text style={styles.submitButtonText}>提交</Text>
                            </TouchableOpacity>
                        )}
                        {/* 备品备件选择模态框 */}
                        <RNModal
                            visible={productModalVisible}
                            transparent={true}
                            animationType="slide"
                            onRequestClose={() => setProductModalVisible(false)}
                        >
                            <View style={styles.modalOverlay}>
                                <View style={styles.supplierModal}>
                                    <View style={styles.supplierModalContent}>
                                        {/* 右上角关闭按钮 */}
                                        <TouchableOpacity style={styles.supplierCloseBtn} onPress={() => setProductModalVisible(false)}>
                                            <Image source={require('../../../../assets/xx.png')} style={styles.supplierCloseIcon} />
                                        </TouchableOpacity>
                                        <Text style={styles.supplierModalTitle}>选择备品备件</Text>
                                        <View style={styles.supplierSearchBox}>
                                            <Image source={require('../../../../assets/ss.png')} style={styles.supplierSearchIcon} />
                                            <TextInput
                                                style={styles.supplierSearchInput}
                                                placeholder="请输入关键词搜索"
                                                placeholderTextColor="#999"
                                                value={productSearch}
                                                onChangeText={text => { setProductSearch(text); fetchProductList(text); }}
                                            />
                                        </View>
                                        <ScrollView style={{ flex: 1 }}>
                                            {productLoading ? (
                                                <ActivityIndicator size="small" color="#0076ff" />
                                            ) : (
                                                productList.length > 0 ? productList.map(item => (
                                                    <TouchableOpacity
                                                        key={item.id}
                                                        style={styles.supplierListItem}
                                                        onPress={() => handleSelectProduct(item)}
                                                    >
                                                        <Text style={styles.supplierListItemText}>{item.supplier_name || item.product_name || item.name}</Text>
                                                    </TouchableOpacity>
                                                )) : (
                                                    <Text style={{ textAlign: 'center', color: '#999', marginTop: 20 }}>暂无数据</Text>
                                                )
                                            )}
                                        </ScrollView>
                                    </View>
                                </View>
                            </View>
                        </RNModal>
                    </View>
                );
            case 3:
                return (
                    <View style={styles.stepContent}>
                        <View style={styles.stepForm}>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>初步解决方案</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        value={firstSolution}
                                        onChangeText={setFirstSolution}
                                        editable={isCurrent}
                                    />
                                </View>
                            </View>
                            <View style={styles.fieldRow}>
                                <Text style={styles.fieldLabel}>是否需要外协</Text>
                                <TouchableOpacity
                                    activeOpacity={isCurrent ? 0.7 : 1}
                                    onPress={isCurrent ? () => setIsOutsource(v => !v) : undefined}
                                    style={{ marginLeft: 0 }}
                                >
                                    <View style={[
                                        styles.checkbox,
                                        isOutsource ? { borderColor: '#0076ff', backgroundColor: '#0076ff' } : { borderColor: '#ccc', backgroundColor: '#fff' },
                                        { width: 22, height: 22, borderRadius: 4, borderWidth: 2, justifyContent: 'center', alignItems: 'center' }
                                    ]}>
                                        {isOutsource && (
                                            <Image source={require('../../../../assets/duihao.png')} style={{ width: 17, height: 17 }} />
                                        )}
                                    </View>
                                </TouchableOpacity>
                            </View>
                            {isOutsource && (
                                <View style={styles.supplierRow}>
                                    <Text style={styles.fieldLabel}>选择供应商</Text>
                                    <View style={styles.supplierSelectBtn}>
                                        <Text style={styles.supplierName}>{selectedSupplier?.supplier_name || '请选择'}</Text>
                                        <TouchableOpacity onPress={async () => {
                                            const params = { current: 1, size: 20, keyword: '' };
                                            console.log('请求参数:', params);
                                            setShowSupplierModal(true);
                                            const res = await fetchSupplierList();
                                            console.log('接口返回:', res);
                                        }}>
                                            <Image source={require('../../../../assets/jiahao.png')} style={styles.supplierAddIcon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            )}
                            <View style={styles.fieldRow}>
                                <Text style={styles.fieldLabel}>预计完成维修时间</Text>
                                <DatePicker
                                    value={expectEndTime ? new Date(expectEndTime) : undefined}
                                    precision="hour" // 支持选择到“时”
                                    minDate={new Date(2000, 0, 1)}
                                    maxDate={new Date(2100, 11, 31, 23, 59, 59)}
                                    onChange={date => {
                                        if (date) {
                                            const y = date.getFullYear();
                                            const m = String(date.getMonth() + 1).padStart(2, '0');
                                            const d = String(date.getDate()).padStart(2, '0');
                                            const h = String(date.getHours()).padStart(2, '0');
                                            setExpectEndTime(`${y}-${m}-${d} ${h}:00`);
                                        } else {
                                            setExpectEndTime('');
                                        }
                                    }}
                                    format="YYYY-MM-DD HH时"
                                >
                                    <TouchableOpacity style={styles.timeSelector} activeOpacity={isCurrent ? 0.7 : 1}>
                                        <Text style={styles.timeText}>{expectEndTime ? expectEndTime.slice(0, 13) + '时' : '请选择时间'}</Text>
                                        <Image source={require('../../../../assets/xiala.png')} style={styles.arrowIcon} />
                                    </TouchableOpacity>
                                </DatePicker>
                            </View>
                        </View>
                        {isCurrent && (
                            <TouchableOpacity style={styles.submitButton} onPress={() => handleStepSubmit(3)}>
                                <Text style={styles.submitButtonText}>提交</Text>
                            </TouchableOpacity>
                        )}
                    </View>
                );
            case 4:
                return (
                    <View style={styles.stepContent}>
                        <View style={styles.stepForm}>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>最终解决方案</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        value={finalSolution}
                                        onChangeText={setFinalSolution}
                                        editable={isCurrent}
                                    />
                                </View>
                            </View>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>我方服务费</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        value={serviceFee}
                                        onChangeText={setServiceFee}
                                        editable={isCurrent}
                                        keyboardType="numeric"
                                    />
                                </View>
                            </View>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>外协服务费</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        value={outServiceFee}
                                        onChangeText={setOutServiceFee}
                                        editable={isCurrent}
                                        keyboardType="numeric"
                                    />
                                </View>
                            </View>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>服务方说明</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        value={serviceDesc}
                                        onChangeText={setServiceDesc}
                                        editable={isCurrent}
                                    />
                                </View>
                            </View>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>验收方说明</Text>
                                <View style={styles.multilineContainerVertical}>
                                    <TextInput
                                        style={styles.multilineInputVertical}
                                        multiline
                                        value={checkerDesc}
                                        onChangeText={setCheckerDesc}
                                        editable={isCurrent}
                                    />
                                </View>
                            </View>
                            <View style={styles.fieldVerticalRow}>
                                <Text style={styles.fieldLabelVertical}>上传图片</Text>
                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginTop: 8 }}>
                                    {repairImages.map((img, idx) => (
                                        <TouchableOpacity
                                            key={idx}
                                            style={{ position: 'relative', marginRight: 10, marginBottom: 10 }}
                                            onPress={() => {
                                                setSelectedImage(img);
                                                setImageModalVisible(true);
                                            }}
                                            activeOpacity={0.8}
                                        >
                                            <Image source={{ uri: img }} style={{ width: 70, height: 70, borderRadius: 8 }} />
                                            {isCurrent && (
                                                <TouchableOpacity style={{ position: 'absolute', top: 0, right: 0, width: 18, height: 18, justifyContent: 'center', alignItems: 'center' }} onPress={() => setRepairImages(repairImages.filter((_, i) => i !== idx))}>
                                                    <Image source={require('../../../../assets/x.png')} style={{ width: 16, height: 16 }} />
                                                </TouchableOpacity>
                                            )}
                                        </TouchableOpacity>
                                    ))}
                                    {isCurrent && (
                                        <TouchableOpacity style={{ width: 70, height: 70, backgroundColor: '#f5f5f5', borderRadius: 8, justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#e0e0e0', borderStyle: 'dashed' }} onPress={handleRepairImageUpload}>
                                            <Image source={require('../../../../assets/xiangji.png')} style={{ width: 32, height: 32, tintColor: '#999' }} />
                                            <Text style={{ fontSize: 12, color: '#999' }}>点击上传</Text>
                                        </TouchableOpacity>
                                    )}
                                </View>
                            </View>
                        </View>
                        {isCurrent && (
                            <TouchableOpacity style={styles.submitButton} onPress={async () => {
                                const id = detail?.id;
                                const submitData = {
                                    id,
                                    final_solution: finalSolution,
                                    service_fee: serviceFee,
                                    out_service_fee: outServiceFee,
                                    service_desc: serviceDesc,
                                    checker_desc: checkerDesc,
                                    repair_link_list: repairImages.map(link => ({ link })),
                                };
                                console.log('完成维修提交数据:', submitData);
                                try {
                                    const res = await endRepairApi(submitData);
                                    Toast.info(res.msg || '提交成功', 1);
                                    setStep(step + 1);
                                    const detailRes = await getDeviceRepairDetailApi(id);
                                    setDetail(detailRes?.data || null);
                                    console.log('完成维修提交接口返回:', res);
                                } catch (e) {
                                    Toast.fail('提交失败', 1);
                                    console.error('完成维修提交失败', e);
                                }
                            }}>
                                <Text style={styles.submitButtonText}>提交</Text>
                            </TouchableOpacity>
                        )}
                    </View>
                );
            case 5:
                return (
                    <View style={styles.stepContent}>
                        <View style={styles.stepForm}>
                            <View style={styles.evaluationSection}>
                                <Text style={styles.evaluationTitle}>确认结果</Text>
                                <View style={styles.radioContainer}>
                                    {[1, 2, 3].map(val => (
                                        <TouchableOpacity
                                            key={val}
                                            style={styles.radioOption}
                                            onPress={undefined}
                                            activeOpacity={1}
                                        >
                                            <View style={[styles.radioButton, checkerResult === val && styles.radioButtonSelected]}>
                                                {checkerResult === val && <View style={styles.radioButtonInner} />}
                                            </View>
                                            <Text style={styles.radioText}>{val === 1 ? '满意' : val === 2 ? '不满意' : '一般'}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </View>
                            </View>
                            <View style={styles.evaluationSection}>
                                <Text style={styles.evaluationTitle}>故障状态</Text>
                                <View style={styles.radioContainer}>
                                    {[1, 2].map(val => (
                                        <TouchableOpacity
                                            key={val}
                                            style={styles.radioOption}
                                            onPress={undefined}
                                            activeOpacity={1}
                                        >
                                            <View style={[styles.radioButton, errorState === val && styles.radioButtonSelected]}>
                                                {errorState === val && <View style={styles.radioButtonInner} />}
                                            </View>
                                            <Text style={styles.radioText}>{val === 1 ? '未解决' : '已解决'}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </View>
                            </View>
                        </View>
                        {/* 评价步骤不显示提交按钮 */}
                    </View>
                );
            default:
                return null;
        }
    };

    useEffect(() => {
        const fetchDetail = async () => {
            try {
                const res = await getDeviceRepairDetailApi(id);
                setDetail(res?.data || null);
                console.log('设备报修详情接口返回:', res);
            } catch (e) {
                setDetail(null);
            } finally {
                setLoading(false);
            }
        };
        fetchDetail();
    }, [id]);

    const toggleSection = (section: keyof typeof expandedSections) => {
        setExpandedSections(prev => {
            // 如果当前section已经展开，则收起它
            if (prev[section]) {
                return {
                    ...prev,
                    [section]: false
                };
            }
            // 如果当前section未展开，则先收起所有section，再展开当前section
            const newState = {
                report: false,
                diagnosis: false,
                startRepair: false,
                completeRepair: false,
                evaluation: false,
            };
            return {
                ...newState,
                [section]: true
            };
        });
    };

    const renderField = (label: string, value: any, isMultiline: boolean = false) => (
        <View style={styles.fieldRow}>
            <Text style={styles.fieldLabel}>{label}</Text>
            {isMultiline ? (
                <View style={styles.multilineContainer}>
                    <TextInput
                        style={styles.multilineInput}
                        multiline
                        placeholder=""
                        value={value || ''}
                        editable={false}
                    />
                </View>
            ) : (
                <Text style={styles.fieldValue}>{value || ''}</Text>
            )}
        </View>
    );

    // 新增：上下布局的字段渲染
    const renderFieldVertical = (label: string, value: any, isMultiline: boolean = false) => (
        <View style={styles.fieldVerticalRow}>
            <Text style={styles.fieldLabelVertical}>{label}</Text>
            <View style={styles.multilineContainerVertical}>
                <TextInput
                    style={styles.multilineInputVertical}
                    multiline={isMultiline}
                    placeholder=""
                    value={value || ''}
                    editable={false}
                />
            </View>
        </View>
    );

    const renderRadioGroup = (title: string, options: string[], selectedValue: any, onSelect: (value: any) => void, isCurrent: boolean) => (
        <View style={styles.fieldRow}>
            <Text style={styles.fieldLabel}>{title}</Text>
            <View style={styles.radioContainer}>
                {options.map((option, index) => (
                    <TouchableOpacity
                        key={index}
                        onPress={isCurrent ? () => onSelect(option) : undefined}
                        style={styles.radioOption}
                    >
                        <View style={[
                            styles.radioButton,
                            selectedValue === option && styles.radioButtonSelected
                        ]}>
                            {selectedValue === option && (
                                <View style={styles.radioButtonInner} />
                            )}
                        </View>
                        <Text style={styles.radioText}>{option}</Text>
                    </TouchableOpacity>
                ))}
            </View>
        </View>
    );

    // 新增：上下布局的单选按钮组
    const renderRadioGroupVertical = (title: string, options: string[], selectedValue: any, onSelect: (value: any) => void, isCurrent: boolean) => (
        <View style={styles.fieldVerticalRow}>
            <Text style={styles.fieldLabelVertical}>{title}</Text>
            <View style={styles.radioContainerVertical}>
                {options.map((option, index) => (
                    <TouchableOpacity
                        key={index}
                        onPress={isCurrent ? () => onSelect(option) : undefined}
                        style={styles.radioOptionVertical}
                    >
                        <View style={[
                            styles.radioButton,
                            selectedValue === option && styles.radioButtonSelected
                        ]}>
                            {selectedValue === option && (
                                <View style={styles.radioButtonInner} />
                            )}
                        </View>
                        <Text style={styles.radioText}>{option}</Text>
                    </TouchableOpacity>
                ))}
            </View>
        </View>
    );

    // 图片上传逻辑
    const handleRepairImageUpload = () => {
        const options = {
            mediaType: 'photo' as const,
            includeBase64: false,
            maxHeight: 2000,
            maxWidth: 2000,
        };
        Alert.alert(
            '选择图片来源',
            '请选择图片来源',
            [
                { text: '取消', style: 'cancel' },
                { text: '拍照', onPress: () => launchCamera(options, handleRepairImageResponse) },
                { text: '从相册选择', onPress: () => launchImageLibrary(options, handleRepairImageResponse) },
            ]
        );
    };
    const handleRepairImageResponse = (response: any) => {
        if (response.didCancel) return;
        if (response.errorCode) return;
        if (response.assets && response.assets[0]) {
            const imageUri = response.assets[0].uri;
            if (imageUri) setRepairImages(prev => [...prev, imageUri]);
        }
    };

    if (loading) {
        return (
            <SafeAreaView style={styles.container}>
                <Header
                    title="维修详情"
                    showBackButton={true}
                    onBackPress={onBackPress}
                    onNavigateToLogin={onNavigateToLogin}
                />
                <View style={styles.loadingContainer}>
                    <ActivityIndicator size="large" color="#0076ff" />
                </View>
            </SafeAreaView>
        );
    }

    if (!detail) {
        return (
            <SafeAreaView style={styles.container}>
                <Header
                    title="维修详情"
                    showBackButton={true}
                    onBackPress={onBackPress}
                    onNavigateToLogin={onNavigateToLogin}
                />
                <View style={styles.loadingContainer}>
                    <Text>未获取到详情数据</Text>
                </View>
            </SafeAreaView>
        );
    }

    // 4. 页面结构调整
    const screenWidth = Dimensions.get('window').width;
    const screenHeight = Dimensions.get('window').height;
    return (
        <>
            <SafeAreaView key="main" style={styles.container}>
                <Header
                    title="维修详情"
                    showBackButton={true}
                    onBackPress={onBackPress}
                    onNavigateToLogin={onNavigateToLogin}
                />
                <View style={styles.content}>
                    {renderProgressBar()}
                    <ScrollView style={styles.scrollContent}>
                        {renderStepContent()}
                    </ScrollView>
                </View>
                {/* 供应商选择模态框 */}
                <Modal
                    visible={showSupplierModal}
                    transparent={false}
                    popup
                    animationType="slide-up"
                    onClose={() => setShowSupplierModal(false)}
                    style={styles.supplierModal}
                >
                    <View style={styles.supplierModalContent}>
                        {/* 右上角关闭按钮 */}
                        <TouchableOpacity style={styles.supplierCloseBtn} onPress={() => setShowSupplierModal(false)}>
                            <Image source={require('../../../../assets/xx.png')} style={styles.supplierCloseIcon} />
                        </TouchableOpacity>
                        <Text style={styles.supplierModalTitle}>选择供应商</Text>
                        <View style={styles.supplierSearchBox}>
                            <Image source={require('../../../../assets/ss.png')} style={styles.supplierSearchIcon} />
                            <TextInput
                                style={styles.supplierSearchInput}
                                placeholder="请输入关键词搜索"
                                placeholderTextColor="#999"
                                value={supplierKeyword}
                                onChangeText={text => { setSupplierKeyword(text); fetchSupplierList(text); }}
                            />
                        </View>
                        <ScrollView style={{ flex: 1 }}>
                            {supplierLoading ? (
                                <ActivityIndicator size="small" color="#0076ff" />
                            ) : (
                                supplierList.map(item => (
                                    <TouchableOpacity
                                        key={item.id}
                                        style={styles.supplierListItem}
                                        onPress={() => { setSelectedSupplier(item); setShowSupplierModal(false); }}
                                    >
                                        <Text style={styles.supplierListItemText}>{item.supplier_name}</Text>
                                    </TouchableOpacity>
                                ))
                            )}
                        </ScrollView>
                    </View>
                </Modal>
            </SafeAreaView>
            <RNModal
                key="modal"
                visible={imageModalVisible}
                transparent={true}
                animationType="fade"
                onRequestClose={() => setImageModalVisible(false)}
            >
                <View style={{
                    flex: 1,
                    backgroundColor: 'rgba(0, 0, 0, 0.9)',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                    <TouchableOpacity
                        style={{
                            flex: 1,
                            justifyContent: 'center',
                            alignItems: 'center',
                            width: '100%',
                            height: '100%',
                        }}
                        onPress={() => setImageModalVisible(false)}
                        activeOpacity={1}
                    >
                        <Image
                            source={selectedImage ? { uri: selectedImage } : require('../../../../assets/zwtp.png')}
                            style={{ width: screenWidth * 0.9, height: screenHeight * 0.7, borderRadius: 10 }}
                            resizeMode="contain"
                        />
                    </TouchableOpacity>
                </View>
            </RNModal>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    content: {
        flex: 1,
        padding: 0,
    },
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    section: {
        backgroundColor: '#f5f5f5',
        marginBottom: 0,
    },
    sectionHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    headerLeft: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    sectionTitle: {
        fontSize: 16,
        fontWeight: '500',
        color: '#333',
    },
    asterisk: {
        color: '#ff4444',
        fontSize: 16,
        marginLeft: 4,
    },
    arrowIcon: {
        width: 18,
        height: 18,
        marginLeft: 6,
        resizeMode: 'contain',
    },
    arrowImage: {
        width: 16,
        height: 16,
        resizeMode: 'contain',
    },
    sectionContent: {
        padding: 16,
        backgroundColor: '#fff',
    },
    cardContainer: {
        backgroundColor: '#fff',
        padding: 15,
        borderRadius: 8,
    },
    fieldRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    fieldLabel: {
        fontSize: 14,
        color: '#666',
        flex: 1,
    },
    fieldValue: {
        fontSize: 14,
        color: '#333',
        flex: 1,
        textAlign: 'right',
    },
    multilineContainer: {
        flex: 1,
        marginLeft: 10,
    },
    multilineInput: {
        borderWidth: 1,
        borderColor: '#e0e0e0',
        borderRadius: 8,
        padding: 12,
        minHeight: 80,
        textAlignVertical: 'top',
        backgroundColor: '#fafafa',
        fontSize: 14,
        color: '#333',
    },
    addButton: {
        width: 30,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
    addButtonImage: {
        width: 24,
        height: 24,
        resizeMode: 'contain',
    },
    checkbox: {
        width: 20,
        height: 20,
        borderWidth: 2,
        borderColor: '#ccc',
        borderRadius: 4,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.08,
        shadowRadius: 2,
        elevation: 2,
    },
    checkboxSelected: {
        borderColor: '#0076ff',
        backgroundColor: '#0076ff',
    },
    checkmark: {
        fontSize: 16,
        color: '#fff',
        fontWeight: 'bold',
        textAlign: 'center',
        lineHeight: 18,
    },
    radioContainer: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginLeft: 10,
    },
    radioContainerVertical: {
        width: '100%',
        marginTop: 8,
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    radioOption: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 20,
        marginBottom: 10,
    },
    radioOptionVertical: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
        marginRight: 20,
    },
    radioButton: {
        width: 20,
        height: 20,
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#ccc',
        backgroundColor: 'transparent',
        marginRight: 8,
        justifyContent: 'center',
        alignItems: 'center',
    },
    radioButtonSelected: {
        borderColor: '#0076ff',
        backgroundColor: '#0076ff',
    },
    radioButtonInner: {
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: '#fff',
    },
    radioText: {
        fontSize: 14,
        color: '#333',
    },
    // 新增：上下布局样式
    fieldVerticalRow: {
        paddingVertical: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        marginBottom: 0,
    },
    fieldLabelVertical: {
        fontSize: 14,
        color: '#666',
        marginBottom: 8,
    },
    multilineContainerVertical: {
        width: '100%',
    },
    multilineInputVertical: {
        borderWidth: 1,
        borderColor: '#e0e0e0',
        borderRadius: 8,
        padding: 12,
        minHeight: 80,
        textAlignVertical: 'top',
        backgroundColor: '#fafafa',
        fontSize: 14,
        color: '#333',
    },
    // 新增：步骤内容样式
    stepContent: {
        padding: 16,
        backgroundColor: '#fff',
        borderRadius: 8,
        marginBottom: 10,
    },
    stepContentTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 15,
        textAlign: 'center',
    },
    stepForm: {
        // 报修详情表单样式
    },
    submitButton: {
        backgroundColor: '#0076ff',
        paddingVertical: 12,
        paddingHorizontal: 20,
        borderRadius: 8,
        alignItems: 'center',
        marginTop: 20,
    },
    submitButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
    scrollContent: {
        flex: 1,
    },
    imageContainer: {
        width: 100,
        height: 100,
        borderRadius: 8,
        overflow: 'hidden',
        backgroundColor: '#f0f0f0',
        justifyContent: 'center',
        alignItems: 'center',
    },
    repairImage: {
        width: '100%',
        height: '100%',
    },
    timeSelector: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        marginTop: 0,
    },
    timeText: {
        fontSize: 14,
        color: '#333',
    },
    evaluationSection: {
        marginBottom: 20,
    },
    evaluationTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 10,
    },
    placeholderText: {
        fontSize: 14,
        color: '#999',
        textAlign: 'center',
    },
    supplierRow: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    supplierSelectBtn: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        borderRadius: 6,
        paddingVertical: 6,
    },
    supplierName: {
        fontSize: 14,
        color: '#333',
    },
    supplierAddIcon: {
        width: 18,
        height: 18,
        resizeMode: 'contain',
        marginLeft: 6,
    },
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end',
    },
    supplierModal: {
        width: '100%',
        height: '80%',
        backgroundColor: '#fff',
        // borderTopLeftRadius: 10,
        // borderTopRightRadius: 10,
        overflow: 'hidden',
    },
    supplierModalContent: {
        flex: 1,
        minHeight: 400,
        padding: 10,
        backgroundColor: '#fff',
    },
    supplierModalTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#222',
        textAlign: 'center',
        marginBottom: 20,
    },
    supplierSearchBox: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#f2f2f2',
        borderRadius: 8,
        paddingHorizontal: 10,
        marginBottom: 16,
    },
    supplierSearchIcon: {
        width: 20,
        height: 20,
        marginRight: 8,
        // tintColor: '#b0b0b0',
    },
    supplierSearchInput: {
        flex: 1,
        height: 40,
        fontSize: 16,
        color: '#333',
    },
    supplierItem: {
        paddingVertical: 14,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    supplierItemText: {
        fontSize: 16,
        color: '#222',
    },
    supplierCancelBtn: {
        marginTop: 20,
        backgroundColor: '#f2f2f2',
        borderRadius: 10,
        paddingVertical: 14,
        alignItems: 'center',
    },
    supplierCancelText: {
        fontSize: 18,
        color: '#222',
    },
    supplierCloseBtn: {
        position: 'absolute',
        top: 7,
        right: 7,
        zIndex: 10,
        width: 24,
        height: 24,
        justifyContent: 'center',
        alignItems: 'center',
    },
    supplierCloseIcon: {
        width: 24,
        height: 24,
        resizeMode: 'contain',
    },
    supplierCard: {
        backgroundColor: '#f7f8fa',
        borderRadius: 8,
        padding: 14,
        marginBottom: 12,
        marginHorizontal: 2,
        borderWidth: 1,
        borderColor: '#e0e0e0',
    },
    supplierCardName: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#222',
        marginBottom: 4,
    },
    supplierCardInfo: {
        fontSize: 13,
        color: '#666',
        marginBottom: 2,
    },
    supplierListItem: {
        backgroundColor: '#fff',
        paddingVertical: 16,
        paddingHorizontal: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    supplierListItemText: {
        fontSize: 16,
        color: '#222',
    },
    imagePreviewModal: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.8)',
    },
    imagePreviewModalContent: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    imagePreviewCloseBtn: {
        position: 'absolute',
        top: 20,
        right: 20,
        zIndex: 10,
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
    },
    imagePreviewCloseIcon: {
        width: 30,
        height: 30,
        resizeMode: 'contain',
    },
    imagePreviewImage: {
        width: '90%',
        height: '90%',
        borderRadius: 10,
    },
    // 流程进度条样式
    progressContainer: {
        backgroundColor: '#fff',
        paddingVertical: 8,
        paddingHorizontal: 16,
        marginBottom: 6,
    },
    progressBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    stepCard: {
        flex: 1,
        backgroundColor: '#fff',
        borderRadius: 8,
        paddingVertical: 4,
        paddingHorizontal: 6,
        marginHorizontal: 4,
        alignItems: 'center',
        minHeight: 45,
    },
    stepCompleted: {
        backgroundColor: '#fff',
    },
    stepCurrent: {
        backgroundColor: '#fff',
    },
    stepPending: {
        backgroundColor: '#fff',
    },
    stepCardContent: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    stepIcon: {
        width: 20,
        height: 20,
        borderRadius: 10,
        backgroundColor: '#ccc',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 2,
    },
    stepIconCompleted: {
        backgroundColor: '#4caf50',
    },
    stepIconCurrent: {
        backgroundColor: '#2196f3',
    },
    stepIconPending: {
        backgroundColor: '#ccc',
    },
    stepIconText: {
        color: '#fff',
        fontSize: 10,
        fontWeight: 'bold',
    },
    stepTitle: {
        fontSize: 10,
        color: '#666',
        fontWeight: '500',
    },
    stepTitleCurrent: {
        color: '#2196f3',
        fontWeight: 'bold',
    },
    stepTitleCompleted: {
        color: '#4caf50',
        fontWeight: 'bold',
    },
    stepConnector: {
        flex: 1,
        height: 2,
        backgroundColor: '#ccc',
        marginHorizontal: 4,
    },
    stepConnectorCompleted: {
        backgroundColor: '#4caf50',
    },
});

export default DeviceRepairDetail; 